بزرگترین وبسایت تفریحی و دانلود

مقدمه اي بر HTML

در اين درس با ويژگيهاي فايلهاي HTML يا اچتمل و نحوه ايجاد يک فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد.
يک فايل HTML چيست؟
HTML را "اچ تي ام ال" و يا اچتمل بخوانيد.
HTML برگرفته از حروف اول Hyper Text Markup Language
ميباشد.
يک فايل HTML فايلي از نوع text ميباشد که متشکل از markup tag ها ميباشد.
مرورگر يا Browser از روي markup tag ها مي فهمد که چگونه بايد صفحه را نمايش بدهد.
يک فايل HTML بايد داراي انشعاب htm و يا html باشد.
يک فايل HTML فايلي از نوع text ميباشد که با هر اديتور ساده اي قابل ايجاد است.
وظيفه اصلي تگ هاي اچتمل ( markup tags ) بيان چگونگي نمايش اطلاعات ميباشد.
ميخواهيد که يک فايل اچتمل بسازيد؟

اگر از ويندوز مايکروسافت استفاده ميکنيد، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند. ) و متن زير را در آن تايپ کنيد:

Title of page

This is my first html page. This text is bold

سپس فايل را با نام مثلا test.html در درايو c:\ ذخيره کنيد.

براي ديدن فايل اچتمل بالا در مرورگر يا Brower تان ( معمولا اينترنت اکسپلورر و يا نتسکيپ نويگيتور ) کافي است که از روي منوي File/Open file فايل بالا را از روي محل ذخيره شده بخوانيد. ( به آدرس فايل در قسمت Address توجه کنيد، مثلا c:\test.html)
يکي از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روي کامپيوتر شما ذخيره شده باشند و يا اينکه از اينترنت خوانده شوند. با کليک روي اين لينک فايلي شبيه فايل ذخيره شده توسط شما از روي وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد!!! ( به آدرس فايل در قسمت Address توجه کنيد، مثلا [url]http://www.khaterat.com/html/dars/test.html[/url] )
توضيح مثال بالا

اولين تگ مثال بالا تگ ميباشد. از روي اين تگ، مرورگر نوع متن يعني اچتمل بودنش را يافته و از روي انتهاي متن اچتمل را ميبابد.

متن بين تگ و تگ اطلاعات شناسنامه اي يا "Header information" متن اچتمل بوده و نمايش داده نخواهند شد. در اين مثال با کمک تگهاي و <title/> تيتر و يا Title صفحه که در اين مثال عبارت "Title of page" ميباشد در بالاي مرورگر نمايش داده خواهد شد. <br /> <br /> متن بين تگ <body> و انتهاي آن يعني تگ <body/> تنها اطلاعاتي است که توسط مرورگرنمايش داده خواهند شد. <br /> <br /> متن بين تگ <b> و انتهاي آن يعني تگ <b/> بصورت Bold و يا توپر نمايش داده خواهند شد. <br /> انشعاب فايل htm يا html ؟<br /> <br /> اغلب مرورگرها هر دو نوع انشعاب را به خوبي ميشناسند ولي ترجيحا به هنگام ذخيره فايلهاي اچتمل از html استفاده کنيد.( استفاده از انشعابهاي سه حرفي مانند htm مربوط به قديم و سيستم عاملهائي چون DOS بودند.)<br /> نکته اي در مورد اديتورهاي اچتمل ( HTML Editors ) <br /> <br /> با وجوديکه با استفاده از اديتورهاي اختصاصي اچتمل مانند FrontPage و يا Claris Home Page امکان نوشتن و طراحي صفحات اچتمل بصورت WYSIWYG يا "What You See Is What You Get" وجود دارد اما توصيه ميشود که از اديتورهاي معمولي متن براي تهيه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد.<br /> بيشترين سوالات پرسيده شده ( FAQ ) :<br /> <br /> فايلم را درست کردم ولي هنوز نميتوانم آنرا در صفحه مرورگرم ببينم، مشکل کجاست؟ <br /> مطمئن شويد که فايل را با انشعاب درست (htm يا html ) ذخيره کرده ايد. در ضمن مطمئن شويد که همان فايل را Open کرده ايد.( نام و مسير فايل را در قسمت Address مرورگرتان چک کنيد.) <br /> <br /> هر بار پس از تغيير و اديت مثالها نسخه اوليه را در صفحه مرورگرم ميبينم و تغييرات داده شده مشاهده نميشود، مشکل کجاست؟ <br /> به خاطر بالا بردن سرعت، هميشه مرورگرها از نسخه هاي موجود در Cache يا حافظه موقت خود براي خواندن صفحات استفاده ميکنند.براي وادار کردن مرورگر به خواندن اصل صفحه کافي است که در مرورگرتان Refresh/Reload کنيد. در اينترنت اکسپلورر کليد F5 يا View/Refresh و در نت اسکيپ Ctrl+R يا View/Reload اينکار را انجام خواهند داد. <br /> <br /> آيا ميتوانم از هر دو مرورگر Internet Explorer و Netscape Navigator استفاده کنم؟ <br /> بله، فقط اگر از استاندارد يونيکد براي فارسي نويسي استفاده ميکنيد، براي ديدن درست صفحات فارسي بايد از نسخه 5 Internet Explorer و به بالا و در مورد Netscape Navigator از نسخه 6.2 و به بالا استفاده کنيد. <br /> <br /> کجا ميتوانم آخرين نسخه از مرورگرهاي Internet Explorer و Netscape Navigator را داونلود کنم؟ <br /> Internet Explorer اينجاست و Netscape Navigator اينجا.</div> <div> </div> <div>____________________________________________________________________________________________</div> <div> </div> <div> <div id="post_message_37565">در اين درس با مفاهيم وب، اينترنت، مرورگرها و استانداردهاي وب آشنا خواهيد شد. <br /> منظور از وب چيست؟ <br /> وب شبکه اي است متشکل از تمامي کامپيوترهاي دنيا، شبکه اي از شبکه ها.<br /> اينترنت، وب، WWW ، web يا World Wide Web همگي يک چيزند.<br /> تمامي کامپيوترهاي وب ميتوانند با هم ارتباط داشته باشند.<br /> کامپيوترهاي موجود در وب با کمک استاندارد ارتباطي يا پروتوکل HTTP با هم ارتباط برقرار ميکنند .<br /> نحوه کارکرد وب چگونه است؟<br /> اطلاعات وب داخل فايلهائي به نام Web Pages و يا صفحات وب قرار دارند.<br /> اين فايلها يا صفحات روي Web Server يا کامپيوترهاي سرويس دهنده وب ذخيره شده اند.<br /> براي ديدن صفحات وب از نرم افزاري به نام مرورگر و يا Web Browser استفاده ميشود.<br /> دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند.<br /> مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد.<br /> مرورگرها چگونه به خواندن صفحات وب ميپردازند؟<br /> يک مرورگر با کمک يک Request درخواستي براي خواندن يک صفحه از وب سرور ميکند.<br /> اين Request يا درخواست بر اساس استاندارد ارتباطي يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد.<br /> آدرس يک صفحه وب چيزي شبيه [url]http://www.khaterat.com/faq.html[/url] است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطي را تعيين ميکند، [url]www.khaterat.com[/url] نام دومين يا Domain است و faq.html نام صفحه اي است که بايد خوانده شود.<br /> مرورگرها چگونه صفحات وب را نمايش ميدهند؟<br /> چگونگي نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.<br /> مرورگرها از روي دستورالعملهاي داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند.<br /> وظيفه اصلي تگ هاي اچتمل ( HTML tags ) بيان چگونگي نمايش اطلاعات ميباشد.<br /> يک تگ اچتمل چيزي شبيه <p> اين تگ پاراگراف است! </p> است.<br /> چه کساني استاندارد هاي وب را تعيين ميکند؟<br /> تعيين استاندارد هاي وب ربطي به شرکتهاي مايکروسافت و يا نت اسکيپ ندارد.<br /> World Wide Web Consortium يا W3C متولي تعيين استانداردهاي وب است. <br /> HTML, CSS and XML از مهمترين استانداردهاي تصويب شده وب ميباشند. <br /> آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .</div> <div> </div> <div> </div> <div>_________________________________________________________________________________________</div> <div> </div> <div> </div> <div> <div id="post_message_37566">يک فايل اچتمل متني از نوع text است که از عناصر يا element ها تشکيل ميشود و براي ايجاد عناصر از تگ ها يا tags استفاده ميشود. در اين فصل با عناصر و تگ ها اچتمل آشنا خواهيد شد. <br /> تگ هاي اچتمل (HTML Tags) <br /> با کمک تگ هاي اچتمل عناصر و يا Elements ساخته ميشوند. <br /> در زبان اچتمل حدود 80 عنصر تعريف شده است. <br /> تگ هاي اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند. <br /> تگ هاي اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b> <br /> تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پاياني نام دارد. <br /> متن بين تگ اول و تگ دوم در يک زوج تگ محتواي عنصر يا element content ناميده ميشود، مثلا "test" <br /> تگ هاي اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. براي مثال دو تگ <b> و <B> معادل هم هستند ولي شديدا توصيه ميشود که به خاطر سازگاري با XHTML از حروف کوچک استفاده شود.<br /> عناصر اچتمل (HTML Elements) <br /> <br /> مثال بخش مقدمه را در نظر بگيريد:<br /> <br /> <html><br /> <head><br /> <title>Title of page

This is my first html page. This text is bold

*** نمونه اي از يک عنصر اچتمل:

This text is bold
عنصر اچتمل بالا با تگ شروع شده و با تگ پايان مي يابد. محتواي اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ نمايش توپر يا bold متون است.

*** مثال دوم يک عنصر اچتمل (معلوم الحال) :

This is my first homepage. This text is bold

عنصر اچتمل بالا با تگ شروع شده و با تگ پايان مي يابد. همانطور که ميبينيد گاهي يک عنصر حاوي يک يا چند تگ ديگر ميباشد.وظيفه تگ تعيين بدنه اصلي يا body يک متن اچتمل است.لازم به يادآوري است که تنها اطلاعات بخش يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.
شناسه هاي يک تگ (Tag Attributes)

تگ ها ميتوانند حاوي اطلاعات اضافي ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ شناسه اي به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند براي نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافي است که به شکل زير عمل کنيد :

در مثال زير تگ داراي چهار شناسه مختلف با نامهاي width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.

......

شناسه ها به صورت کلي "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادي يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد براي زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه هاي " و يا ' بنويسيد و اختيار دست شما است فقط در مواردي که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.

____________________________________________________________________________________________

تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements هاي اچتمل هستند و در اين فصل با عناصر و تگ هاي پايه و مهم:

,
,
....
, ,

آشنا خواهيد شد . يکي از بهترين روش هاي يادگيري تگ هاي اچتمل ديدن مثالها و تغيير آنها ميباشد و با کمک اديتور اختصاصي ما و با استفاده از امکانات فارسي نويسي آن به صورت آنلاين ميتوانيد به مطالعه و يادگيري مثالها پرداخته، کدهاي اچتمل را تغيير داده و با کليک روي دکمه "نمايش نتايج" به مشاهده نتايج بپردازيد.

مثالها :

مثالي ساده از يک صفحه اچتمل
در اين مثال بسيار ساده جمله "!Hellow World" در صفحه مرور گر نمايش داده ميشود و در واقع محتوا و متن عنصر body تماما نمايش داده خواهد شد.

پاراگرافهاي ساده:
چگونگي نمايش متون با کمک تگ
و بصورت پاراگرافي

نمايش متون فارسي:
چگونگي نمايش متون فارسي. براي جزئيات بيشتر به فصل فارسي نويسي مراجعه کنيد.

مثالهاي بيشتر:
سر تيترها (Headings)
سر تيترها با کمک تگ هاي
تا
تعيين ميشوند.
معرف بزرگترين سر تيتر و
معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالي قبل و بعد از هر سر تيتر اضافه خواهد کرد.

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ
معرفي ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالي قبل و بعد از آن اضافه خواهد کرد.

This is a paragraph

This is another paragraph

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.

سطر جديد (Line Breaks)
براي رفتن سر سطر جديد از تگ
استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ
از نوع تگ هاي خالي بوده و داراي تگ انتهائي (مثلا
) نميباشد.

This
is a para
graph with line breaks

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
کامنت ها در اچتمل (Comments)

براي نوشتن شرح و توضيحات در مورد کدهاي اچتمل بايد از تگ خاصي استفاده کنيد. براي اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ هاي comment را در نظر نگرفته و محتوي آنها را نمايش نخواهد داد و فقط شرح و توضيحات براي برنامه نويس و ديگر افرادي که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکي و آنهم در ابتدا)

مثالي در مورد comments و نحوه استفاده از آن
چند نکته کاربردي:

توجه داشته باشيد که بدليل وجود مرورگرهاي متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکي تفاوت در حالتهاي مختلف نمايش داده ميشوند و هميشه سعي کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتي مرورگرهاي کامپيوترهاي مکينتاش چک کرده و همچنين در دقت هاي نمايش 800x600 و 1024X768 آن را امتحان کنيد.

از نظر فاصله و سطر بندي، متني که در صفحه اديتورتان تايپ ميکنيد با چيزي که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله هاي اضافي (space) و خطهاي خالي متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.

براي نمايش بيش از يک فاصله خالي بايد از نويسها يا ترکيب کاراکتري خاصي (None Breaking Space) استفاده کنيد. در بخش ( Entities ) نهادها به اين مطلب بيشتر پرداخته خواهد شد.

فاصله هاي اضافي بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالي در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.

براي ايجاد يک سطر جديد هيچگاه از يک تگ
خالي استفاده نکنيد و به جاي آن از تگ
استفاده کنيد..

مرورگرها به هنگام نمايش بعضي عناصر بصورت اتوماتيک يک سطر خالي قبل و بعد از آن عنصر نمايش خواهند داد. براي نمونه اين گروه از عنصرها ميتوان از پاراگراف (
) و سرتيترها () نام برد.

تگ
يا Horizontal Roler سبب نمايش يک خط افقي خواهد شد و در واقع بخش هاي مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.
مثالهاي بيشتر:

باز هم مثال پاراگرافها
اين مثال بعضي از مقادير قراردادي عناصر پاراگراف را شرح ميدهد.

ترازبندي پاراگراف ها
اين مثال نحوه تراز بندي يک پاراگراف را با کمک شناسه يا attribute اي به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.
( "align="center )

رفتن سر سطر جديد
اين مثال نحوه استفاده از تگ
را در يک متن اچتمل نشان ميدهد.

سر تيترها
اين مثال نحوه استفاده از تگهاي
....
را در يک متن اچتمل نشان ميدهد.

ترازبندي سر تيترها
اين مثال نحوه تراز بندي يک سر تيتر را با کمک شناسه يا attribute اي به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.
( "align="center )

نمايش خطوط افقي
اين مثال نحوه نمايش خطوط افقي با استفاده از تگ
ميباشد.

استفاده از comment
اين مثال نحوه استفاده از comment در کدهاي اچتمل را نمايش ميدهد.

تعيين رنگ زمينه صفحه
اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکي از شناسه هاي (attribute ) عنصر body با نام bgcolor نشان ميدهد. (Background Color)
( "bgcolor ="blue )

تگهاي اصلي
در جدول زير عناصر معرفي شده در اين فصل به همراه لينکهاي مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که براي هر عنصر فهرستي از شناسه ها يا Attributes موجود است و همچنين به شناسه هاي کنارگذاشته شده (Deprecated) در نسخه هاي آينده اچتمل توجه داشته باشيد و سعي کنيد که از آنها استفاده نکنيد.

:
Start Tag Purpose کاربرد

Defines a html document نشان شروع متن اچتمل

Defines the document's body تعيين بدنه و قسمت اصلي صفحه اچتمل

-
Defines heading 1 to heading 6 تعريف سر تيترهاي h1 تا h6

Defines a paragraph تعريف پاراگراف

Inserts a single line break رفتن سر خط جديد

Defines a horizontal rule نمايش خط افقي

Defines a comment in the HTML source code نوشتن شرح و comment

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

_____________________________________________________________________________________________

در اين درس با فارسي نويسي، فارسي سازي و استاندارد يونيکد و نحوه استفاده از اديتور آنلاين و فارسي اين سايت آشنا خواهيد شد. همچنين متاتگ http-equiv و شناسه dir نيز معرفي خواهد شد.

سؤالات مربوط به فارسي نويسي را ميتوان به سه گروه عمده تقسيم کرد:
- چگونه فارسي بنويسم ؟
- چگونه فارسي بخوانم؟
- چگونه صفحات اچتمل فارسي را نمايش دهم؟

در مورد فارسي نويسي و فارسي خواني اگر از اديتور آنلاين ما در بخش مثالها استفاده ميکنيد نيازي به فارسي سازي نداريد و با کمک اديتور مزبور بايد به راحتي قادر به تايپ فارسي و لاتين باشيد.اگر ميخواهيد که در هر حال سيستمتان را فارسي کنيد، مطالعه صفحات زير راهنماي بسيار خوبي براي فارسي سازي ميباشند:

* راهنماي فارسي سازي ويندوز
* استفاده از استانداردِ يونيکد
* وبلاگ فارسي FAQ
دو نکته بسيار مهم در مورد فارسي نويسي:

روش کدگزاري UTF-8
اکيدا توصيه ميشود که براي تايپ و تمايش متون فارسي از استاندارد يونيکد و روش کدگزاري UTF-8 اسنفاده شود و اين روشي است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسي تعيين نوع کدگزاري يا encoing صفحات فارسي است که براي اينکار بايد از متاتگ خاصي به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:

در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روي متاتگ فوق نوع کدگزاري (Encoding) را تشخيص داده و ديگر مثلا نيازي به تعيين دستي (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.
شناسه يا attribute ي به نام dir
جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسي بايد با کمک روشي جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ي به نام dir يا همان direction اين کار را براي شما انجام ميدهد. اين شناسه داراي دو مقدار ممکن ميباشد :

dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ
مثلا براي نمايش جمله فارسي "سلام بر دنياي وب!" با کمک عناصر p يا div کافي است که به يکي از شکلهاي زير عمل شود:

سلام بر دنياي وب

سلام بر دنياي وب

در بسياري از عناصر و تگ هاي اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

,
, , , , ,
,
, ,
, استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ
ايجاد ميشوند. نام هاي td و tr به ترتيب خلاصه شده table row و table data ميباشند.
محتوي يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.

مثال زير جدولي است با دو سطر و سه ستون :

کد اچتمل جدولي با دو سطر و سه ستون نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3

رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

جدولها و شناسه border و dir :

در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزي با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعني جدولي بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.
در مثال بالا شناسه dir يا direction و مقدار rtl براي آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامي سلولهاي جدول اعمال خواهذ شد.
ساده ترين جدول ممکن در اچتمل، جدولي است با يک سطر و يک ستون!
سرستون در جداول (Headings)

سرستونها در جداول با کمک تگ تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد:

کد اچتمل جدولي با سه سطر و سه ستون نمايش جدول روبرو توسط مرورگر

سرستون ا سرستون 2 سرستون 3

رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3

رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

سرستون ا سرستون 2 سرستون 3
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

همانطوريکه مشاهده ميکنيد سر ستونها مانند سلولهاي معمولي جداول تعريف ميشوند و فقط به جاي td از th استفاده شده و لي در نمايش محتواي سر ستونها bold يا توپر نمايش داده خواهند شد.
خانه هاي خالي در جداول (Empty Cells)

اگر محتواي خانه اي از يک جدول خالي باشد چه چيزي بايد نمايش داده شود؟ بسته به مرورگري که استفاده ميکنيد نتيجه نمايش متفاوت است و مثلا در مثال زير خانه خالي جدول بدون مرز نمايش داده خواهد شد:
کد اچتمل جدولي با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2

رديف 2، سلول 1

رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1

در اينگونه موارد براي رفع مشکل کافي است که از non-breaking space (&nbsp يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد:
کد اچتمل جدولي با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر

رديف 1، سلول 1 رديف 1، سلول 2

رديف 2، سلول 1  

رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1

توجه داشته باشيد که اينبار مرزهاي خانه خالي جدول بدرستي ترسيم گرديده اند.
چند نکته اساسي در مورد جداول:

در جداول، رديفها، خانه ها و سر ستونها از تعداد زيادي از شناسه ها ميتوانيد استفاده کنيد که شرح همگي آنها از حوصله اين دوره مقدماتي خارج است و توصيه ميشود که از مثالهاي زير و جدول واقع در انتهاي اين صفحه براي مطالعه هر چه بيشتر در مورد جزئيات شناسه ها استفاده شود.
شناسه dir قابل استفاده در بسياري از تگها ( مثلا table ، tr ، td ، th ) ميباشد. با کمک شناسه dir و مقدار rtl براي آن، جهت نمايش متون فارسي از "راست به چپ" تعيين ميگردد. توجه داشته باشيد که مقدار شناسه dir به صورت موروثي از table به tr و th و از tr و th به td خواهد رسيد.مثلا براي تعيين مقدار rtl براي تمامي خانه هاي يک جدول کافي است که فقط شناسه مزبور را در تگ table قيد کنيد و نيازي به قيد آن در تمامي خانه هاي جدول نيست. البته ميتوانيد که در مورد يک رديف خاص و يا يک خانه خاص شناسه dir را موردي تعيين کنيد.
مثالهاي بيشتر

مرز در جداول
اين مثال کاربرد شناسه border را در نمايش جداول نشان ميدهد.

تعيين جهت نمايش متن در خانه هاي يک جدول
اين مثال کاربرد شناسه dir است در تعيين جهت نمايش متن در خانه هاي يک جدول.

عنوان جداول و تگ caption
مثالي در مورد تگ caption در تعريف جداول

توسعه سطري يا ستوني در جداول
مثالي در مورد شناسه هاي colspan و rowspan در جداول

جدولي با محتويات مختلف
محتوي يک خانه جدول تقريبا ميتواند هر عنصر اچتملي باشد.

فاصله گذاري بين خانه هاي جداول
اين مثال نحوه ايجاد فاصله بين خانه هاي جدول را نشان ميدهد.(cellspacing)

لايه گذاري خانه هاي جدول
اين مثال نحوه ايجاد فاصله خالي بين خانه هاي جدول و مرز آنها را نشان ميدهد.(cellpadding)

تعيين رنگ زمينه يا تصوير زمينه کل يک جدول
تعيين رنگ زمينه يا تصوير زمينه سراسري جداول با کمک شناسه هاي bgcolor و background

تعيين رنگ زمينه يا تصوير زمينه يک يا چند خانه از جدول
تعيين رنگ زمينه يا تصوير زمينه در خانه هاي جداول با کمک شناسه هاي bgcolor و background

تراز بندي محتوا در خانه هاي جداول
اين مثال نحوه ترازبندي محتواي خانه هاي جداول با کمک شناسه "align" را نشان ميدهد.

شناسه frame در جداول
مثالي در مورد کاربرد شناسه "frame" در المان table جهت تعيين شکل مرز جداول.

تراز بندي محتوا در خانه هاي جداول
اين مثال نحوه ترازبندي محتواي خانه هاي جداول با کمک شناسه "align" و "valign" را نشان ميدهد.
تگهاي جداول
Start Tag Purpose کاربرد
Defines a table تعريف جدول

Defines a table row تعريف رديف ها در جداول

Defines a table header تعريف سرستون در جداول

Defines a table cell تعريف سلول يا خانه هاي يک جدول

Defines a table caption تعريف عنوان جدول

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

کيفيت مقاله :

_______________________________________________________________________________________________

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ هاي مربوطه مخصوصا تگهاي Frame و Frameset آشنا خواهيد شد.
مثالها:

مجموعه فريمهاي عمودي
مثالي در مورد ايجاد مجموعه فريمهاي عمودي توسط تگ هاي frameset و frame

مجموعه فريمهاي افقي
مثالي در مورد ايجاد مجموعه فريمهاي افقي توسط تگ هاي frameset و frame

مثالهاي بيشتر

فريمها (Frames)

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستق
نظرات شما عزیزان:

نام :

آدرس ایمیل:

وب سایت/بلاگ :

متن پیام:

نظر خصوصی

کد را وارد نمایید:

عکس شما

آپلود عکس دلخواه:

نوشته شدهبرچسب:, توسط ir-security

.: Weblog Themes By www.NazTarin.com :.

   درباره

با سلام خدمت شما بازدید کنندگان گرامی امیدوارم لحظات خوبی رو در وبلاگ سپری کنید برای پیروی از ما به انجمن ما نیز سر بزنید www.bia2.4umer.com برای دیدن مطالب سایت نیز باید در خبرنامه عضو شوید در صورتی که تمایل داشتید با من در ارتباط باشید ای دی های من را اد کنید. ashke_peyman@yahoo.com
ir-security@nimbuzz.com

   ارشیو

? تير 1390
? خرداد 1390

   مطالب قلبی

? مواد مخدر موجود است!

? مردانی که مجبورند به همسران‌شان خیانت کنند!!؟

? شیوه های جدید حفظ رابطه زناشویی

? بهترين زمان براي برقراري رابطه جنسي همسران جوان

? 10+1 روش شاد کردن خانم‌ها

? دوست دارید بدانید اگر با معشوق خود ازدواج کنید نتیجه چه می شود؟ پس این مطلب را بخوانید

? عقدنامه ازدواج را بدقت بخوانيد !

? عکس های قدیمی نشانه ای برای موفقیت در ازدواج!

? خانم‌ها بجاي مهريه‌هاي سنگين این شرط را بگذارند

? حسادت جنسی در زندگی زناشویی

? اولین سوال داماد از عروس چیست؟

? زن و شوهرهای جذاب صاحب چه فرزندی می شوند؟!

? قدرت در رابطه زناشویی به دست کیست؟

? 8 دروغ رایج و معروف بین زوج های جوان!!

? 10 مشکل اصلی در ازدواج‌ های فاقد رابطه‌ جنسی

? پیری لورل و هاردی

? تصاویر و اسامی بدترین مادرهای دنیا

? 10 حقیقت عجیب درباره مغز

? جملات مشهور در مورد آقايون (طنز)

? هر چه پير تر ميشی‌ ثروتمند تر ميشيی ! چه به خواهی‌ چه نخواهی

? معرفی پاکیزه‌ترین شهرهای دنیا

? انشا یک بچه دبستانی در مورد ازدواج

? معنای آرامش (داستان)

? این بیماری میل جنسی را کاهش می دهد!

? کمپین یک میلیون ریش در فیس ‌بوک !

? تصاویر خصوصی کاربران خود شیفته در فیس‌بوک!

? اولین مرجع تقلیدی كه در facebook صفحه دار شد

? سایتی برای خیانت مردان و زنان متاهل!

? گران ترین عکس دنیا + تصویر

? پاتوق فوتبالیست‌ها و مداحان قلیان‌کش کجاست؟

   نویسنده

? ir-security

   دسته بندی

? هک
? اموزش هک سایتهای php
? پورت یا port چیست ؟
? ای پی یا ip چیست؟
? تروجان چیست؟
? علائم یک سیستم هک شده
? ده دلیل اصلی هک شدن سایت ها
? چگونه هکرها را نا امید کنیم؟
? اخبار هکرها
? عکس
? عکسهای باهال
? عکسهای عاشقانه و هنری
? عکسهای عاشقانه سری 1
? عکس دکوراسیون
? عکس های جالب
? عکس کاریکاتور ازدواج
? عکس ماشین
? عکس ماکت
? بهداشت
? درمان بیماری ها
? بیماریها
? تذکرات مهم
? مواد مخدر
? ترفند های اینترنت
? طریقه ساختن کانکشن وی.پی.ان
? دریافت فایلهای cer&key از سایت
? انواع ترفند اینترنتی
? اخبار اینترنت
? اس ام اس
? عاشقانه
? باهال
? ضد حالی
? اس ام اس ازدواج
? موبایل
? درخواست فایل های cer & key
? اخبار موبایل
? ترفندهای موبایل
? ترفندهای موبایل
? متفرقه
? سخن های زیبا
? جملات طنز
? چیستان
? اخبار روز
? داستان
? ترفند و اخبار سخت افزارها
? معرفی لپ تاپ
? ابزار ياهو
? اى دى ميكر
? کامپیوتر
? ترفند كامپيوتر
? اخبار کامپیوتر
? مقاله
? اموزش زبان html
? مدل های لباس
? مانکنهای ایرانی
? همه چی درباره مدل لباس
? رژیم غذایی
? توصیه های مهم
? 10عادت در نوروز چاقتان میکند
? بخش بانوان
? اخبار بانوان
? اموزش اشپزی
? تهيه دوغ گاز دار
? دانستنیها
? دانستنیها
? ازدواج
? توصیه ها
? مباحث زناشویی
? یاداوریهای مهم

   لینک ها

? بهار ضد پسر
? کسب درامدتست شده
? هستی-افسوس
? سی تی موزیک
? قران بلاگ
? قرص کمر سفت کننده|داروی کمر سفت کن
? جدیدترین شعرها و جملات+مطالب اعتماد به نفس و انواع فال؟
? انجمن بزرگ بیا تو
? شوری سنج اب اکواریوم
? کمربند چاقویی مخفی

تبادل لینک هوشمند

برای تبادل لینک ابتدا ما را با عنوان انجمن بیا تو و آدرس www.bia2.4umer.com لینک نمایید سپس مشخصات لینک خود را در زیر نوشته . در صورت وجود لینک ما در سایت شما لینکتان به طور خودکار در سایت ما قرار میگیرد.

   لینک ها

? کیت اگزوز ریموت دار برقی
? ارسال هوایی بار از چین
? خرید از علی اکسپرس
? مستر قلیون

ورود اعضا:

خبرنامه وب سایت:

آمار وب سایت:
بازدید امروز : 3
بازدید دیروز : 23
بازدید هفته : 3
بازدید ماه : 32
بازدید کل : 62010
تعداد مطالب : 103
تعداد نظرات : 1
تعداد آنلاین : 1